import React from 'react';
import { Layout, Modal } from 'antd';
import { createHashHistory } from 'history';
import { HomeHeader, HomeSider, HomeContent } from './children/index';
import { SetMenu } from './pages/setMenu';

const { Header, Sider, Content } = Layout;
const history = createHashHistory();

export default class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            current: 'home',
            sider: false,
            modal: { title: '', content: <div /> },
            modalVisible: false
        };
        this.modals = {
            setMenu: { title: '菜单配置', url: '/setMenu', content: <SetMenu /> },
            setCommon: { title: '通用配置', url: '/setCommon', content: <div /> }
        };
    }

    menuClick(e) { // 切换顶部导航栏菜单
        console.log('菜单点击事件', e);
        switch (e.key) {
            case 'setMenu':
            case 'setCommon':
                this.setState({ modalVisible: true, modal: this.modals[e.key] });
                break;
            case 'logout':
                console.log('退出登录');
                history.push('/register');
                break;
            case 'home':
                this.setState({ current: e.key, sider: false });
                break;
            default:
                this.setState({ current: e.key, sider: true });
                break;
        }
    }

    siderClick(e) { // 切换侧边栏菜单
        if (e.key) { // 有路由配置
            this.homeContent.setRoute(e.key);
        }
    }

    render() {
        let { current, sider, modal, modalVisible } = this.state;
        return (
            <div className="home">
                <Layout>
                    <Header><HomeHeader current={current} menuClick={(e) => this.menuClick(e)} /></Header>
                    <Layout>
                        {sider && <Sider><HomeSider current={current} menuClick={(e) => this.siderClick(e)} /></Sider>}
                        <Content className="home-content">
                            <HomeContent ref={el => this.homeContent = el} current={current} />
                        </Content>
                    </Layout>
                    {/* {current==='home' && <Footer className="txt-c">Copyright &copy; 2019 EDaily</Footer>} */}
                </Layout>
                <Modal footer={null} onCancel={() => this.setState({ modalVisible: false })} title={modal.title}
                    visible={modalVisible}
                >
                    {modal.content}
                </Modal>
            </div>
        )
    }
}
export { Home };